import React, { useState, useEffect } from "react";
import ReactECharts from "echarts-for-react";
import * as echarts from "echarts";
import { Progress } from "antd";
import IconFont from "@/components/IconFont";

function getMonthArray() {
  const currentDate = new Date(); // 获取当前日期
  const currentMonth = currentDate.getMonth(); // 获取当前月份（0-11）

  const months = []; // 用于存储月份的数组

  for (let i = 0; i <= currentMonth; i++) {
    const month = i; // 月份从1开始，所以需要加1
    const formattedMonth = month < 10 ? `0${month}` : `${month}`;
    months.push(formattedMonth);
  }

  return months;
}

function Verb({ data }) {
  const safer = data?.px ?? {};

  let xData = getMonthArray();

  let ayData = safer?.a?.filter((it, i) => i < xData?.length)??[];
  let yData = safer?.b?.filter((it, i) => i < xData?.length)??[];

  const option = {
    color: ["#80FFA5", "#00DDFF", "#37A2FF", "#FF0087", "#FFBF00"],
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "#6a7985",
        },
      },
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      top: "12px",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        data: xData,
      },
    ],
    yAxis: [
      {
        type: "value",
      },
    ],
    series: [
      {
        name: "单位培训",
        type: "line",
        smooth: true,
        lineStyle: {
          width: 1,
        },
        itemStyle: {
          color: "#5CBFF9", // 这里可以指定线条的颜色
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.5,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 1,
              color: "rgba(255,255,255,0.1)",
            },
            {
              offset: 0,
              color: "#5CBFF9",
            },
          ]),
        },
        emphasis: {
          focus: "series",
        },
        data: ayData,
      },
      {
        name: "访客培训",
        type: "line",
        smooth: true,
        lineStyle: {
          width: 1,
        },
        itemStyle: {
          color: "#FACE42", // 这里可以指定线条的颜色
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.5,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 1,
              color: "rgba(255,255,255,0.1)",
            },
            {
              offset: 0,
              color: "#FACE42",
            },
          ]),
        },
        emphasis: {
          focus: "series",
        },
        data: yData,
      },
    ],
  };

  return (
    <div style={{ flex: 1, overflow: "hidden", display: "flex", gap: 10 }}>
      <div
        style={{
          width: 100,
          fontSize: 14,
          display: "flex",
          flexDirection: "column",
          justifyContent: "center",
        }}
      >
        <div
          className="ffsr"
          style={{
            display: "flex",
            flexDirection: "column",
            justifyContent: "center",
            overflow: "hidden",
          }}
        >
          <div className="centerl">
            <IconFont type="icon-danwei" style={{ fontSize: 22 }}></IconFont>
            <span style={{ opacity: 0.5, fontSize: 12 }}>单位培训</span>
          </div>
          <div>
            <span>
              <b>
                {ayData.reduce(function (total, num) {
                  return total + num;
                }, 0)}
              </b>
              人次
            </span>
          </div>
        </div>
        <div
          className="ffsr"
          style={{
            display: "flex",
            flexDirection: "column",
            justifyContent: "center",
            overflow: "hidden",
          }}
        >
          <div className="centerl">
            <IconFont type="icon-fangke" style={{ fontSize: 30 }}></IconFont>
            <span style={{ opacity: 0.5, fontSize: 12 }}>访客培训</span>
          </div>
          <div>
            <span>
              <b>
                {yData.reduce(function (total, num) {
                  return total + num;
                }, 0)}
              </b>
              人次
            </span>
          </div>
        </div>
      </div>
      <div style={{ flex: 1 }}>
        <ReactECharts
          option={option}
          style={{ width: "100%", height: "100%" }}
        />
      </div>
    </div>
  );
}

export default Verb;
